<template>
  <!-- 登录模态框 -->
  <div class="modal">
    <!-- 
      mask 会有点击事件  关闭
      loginbox  后期也会有点击事件（关闭，登录） 都会触发mask
      此处在布局上解决冒泡问题
    -->
    <!-- 遮罩层 -->
    <div class="mask" @click="changeIsShowLoginModal(false)"></div>
    <!-- 登录内容 -->
    <div class="loginBox">
      <!-- 关闭按钮 -->
      <div class="close" @click="changeIsShowLoginModal(false)"></div>
      <!-- 导航区域 -->
      <section class="nav">
        <a href="#" :class="{active:isShowContent}" @click="isShowContent = true">手机号码登录</a> |
        <a href="#" :class="{active:!isShowContent}" @click="showQr" >微信扫码登录</a>
      </section>
      <!-- 内容区域 -->
      <div class="content" >
        <!-- 手机号码登录  内容 -->
        <div class="phoneLogin" v-show="isShowContent">
          <div class="row">
            <input v-model="phoneNumber" ref="phone" type="text" class="ipt" placeholder="请输入手机号">
          </div>
          <!-- 拼图验证码 -->
          <div class="row">
            <slide-verify 
            :l="42" 
            :r="20" 
            :w="362" 
            :h="140"
            :accuracy="15"
            @success="onSuccess" 
            @fail="onFail" 
            @refresh="onRefresh" 
            :style="{ width: '100%' }" 
            class="slide-box" 
            ref="slideBlock" 
            :slider-text="msg">
            </slide-verify>
          </div>
          <div class="row">
            <input type="text" class="ipt" placeholder="请输入短信验证码" v-model="code">
            <button class="btn btncode" @click="getcode" v-show="!isShowCount">获取验证码</button>
            <button class="btn btncode" v-show="isShowCount">{{count + 's'}}</button>
          </div>
          <div class="row">
            <button class="btn btnlogin" @click="submitFn">登录</button>
          </div>  
        </div>
        <!-- 微信扫码登录  内容 -->
        <div class="qrLogin" v-show="!isShowContent" id="weixin">
          
        </div>
      </div>
    </div>

  </div>
</template>

<script>

import { mapMutations,mapActions } from 'vuex'
// 引入验证手机号的工具包
import { validatePhoneNumber } from '../until/index'
// 引入接口API
import { SendSMSAPI,PhoneReginAPI, BindPhoneAPI, UserProfilesAPI } from '../request/api'
export default {
  data() {
    return {
      isShowContent: true,
      msg : '向右滑动',
      // 手机号
      phoneNumber: '',
      // 倒计时
      count: 59,
      // 是否显示倒计时数字
      isShowCount : false,
      // 验证码
      code : ''
    }
  },
  methods: {
    ...mapMutations({
      changeIsShowLoginModal: "showModal/changeIsShowLoginModal",
      changeIsLogined: "loginStatus/changeIsLogined",
      // changeIsShowToastModal: "showToast/changeIsShowToastModal"
    }),
    ...mapActions({
      asyncIsShowToast: 'showToast/asyncIsShowToast',
      asyncChangeUserInfo: 'userInfo/asyncChangeUserInfo'
    }),
    // 拼图成功
    onSuccess(times) {
      let ms = (times / 1000).toFixed(1);
      this.msg = "login success, 耗时 " + ms + "s";
    },
    // 拼图失败
    onFail() {
      this.onRefresh(); // 重新刷新拼图
    },
    // 拼图刷新
    onRefresh() {
      this.msg = "再试一次";
    },
    // 倒计时函数
    countdown(){
      // 显示数字
      this.isShowCount = true
      let timer = setInterval(()=>{
        this.count-- 
        if (this.count == 0){
          clearInterval(timer)
          this.count = 59
          this.isShowCount = false
        }
      },1000)
      // 连续点击后  定时器过快
      // 解决：开关思想，区分开按钮
    },
    // 提取验证手机号  图形验证码的公共方法
    toVerify(){
      if (!validatePhoneNumber(this.phoneNumber)) {
        // alert('请输入正确的手机号');
        // this.changeIsShowToastModal({
        //   show:true,
        //   toastMsg:'请输入正确的手机号',
        //   toastType:'danger'
        // })
        // // 设置一次性定时器  在1.5s后隐藏提示框
        // setTimeout(() => {
        //   this.changeIsShowToastModal({
        //   show:false,
        // })
        // },1500)
        this.asyncIsShowToast({
          show:true,
          toastMsg:'请输入正确的手机号',
          toastType:'danger'
        })
        this.$refs.phone.focus()
        return false
      }
      if (this.msg == "向右滑动"||this.msg =="再试一次"){
        // alert("请滑动图形验证")
        this.asyncIsShowToast({
          show:true,
          toastMsg:'请滑动图形验证',
          toastType:'danger'
        })
        return false
      }
      return true
    },
    // 获取验证码
    async getcode() {
      /*
        业务逻辑
        1.手机号输入不正确   提示
        2.滑块验证不正确   提示
        3.验证通过了
          3.1发请求获取验证码
          3.2倒计时效果
      */
      // 1.手机号输入不正确  提示
      // 2.滑块验证不正确   提示
      if (!this.toVerify()){
        return
      }
      // 3.验证通过了
      //   3.1发请求获取验证码
      let res =await SendSMSAPI({
        phone: this.phoneNumber
      })
      if (!res) return
      // alert('发送验证码成功')
      this.asyncIsShowToast({
          show:true,
          toastMsg:'发送验证码成功',
          toastType:'success'
        })
      //   3.2倒计时效果  count值 自动递减
      this.countdown()
    },
    // 登录功能
    async submitFn() {
      // 1.手机号验证成功
      // 2.图片验证码成功
      if( !this.toVerify() ) {
        return
      }
      // 3.手机验证码通过（此处只是判断是否为空）
      if (this.code.trim() == '') {
        // alert('请输入手机验证码')
        this.asyncIsShowToast({
          show:true,
          toastMsg:'请输入手机验证码',
          toastType:'danger'
        })
        return
      }
      // 4.发起登录请求 (api.js  引入接口)
      // 如果本地存储了uuid，则调用bindPhoneAPI请求
      // 否则为普通手机号登录
      let uuid = localStorage.getItem('uuid')
      let res = null
      if(uuid) {
        res = await BindPhoneAPI({
          verifyCode: this.code,
          phone:this.phoneNumber,
          uuid
        })
      }else {
        res =await PhoneReginAPI({
          verifyCode: this.code,
          phone:this.phoneNumber
        })
      }
      if (!res) {
        return
      }
      // 登录成功后
      // 4.1提示登录成功信息
      // alert('登录成功')
      this.asyncIsShowToast({
          show:true,
          toastMsg:'登录成功',
          toastType:'success'
        })
      // 4.2本地存储token
      localStorage.setItem("x-auth-token",res["x-auth-token"])
      // 4.3隐藏登录模态框
      this.changeIsShowLoginModal(false)
      // 4.4topbar中登录按钮换成购物车按钮
      // 修改vuex中的登录状态
      this.changeIsLogined(true)
      //--微信绑定后删除本地uuid
      localStorage.removeItem('uuid')
      // 删除地址栏中code

      // 发送获取用户信息请求
      this.asyncChangeUserInfo()
    },
    // 显示微信二维码
    showQr() {
      this.isShowContent = false

      let _this = this;
        new WxLogin({
          id: "weixin",
          appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
          scope: "snsapi_login",
          // 扫码成功后重定向的接口
          redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
          // state填写编码后的url
          state: encodeURIComponent(
            window.btoa("http://127.0.0.1:8080" + _this.$route.path)
          ),
          // 调用样式文件
          href: "data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmltcG93ZXJCb3ggLmluZm8gew0KICBkaXNwbGF5OiBub25lOw0KfQ==",
        });
    }
  }
}
</script>

<style lang="less" scoped>
  .modal {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    .mask {
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.4);
    }
    .loginBox {
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 555px;
      height: 423px;
      background: url('../assets/img/login-box-bg.png');
      .close {
        position: absolute;
        right: 60px;
        top: 15px;
        height: 22px;
        width: 22px;
        background: url('../assets/img/close.png');
      }
      .nav {
        display: flex;
        justify-content: center;
        padding-top: 50px;
        color: #999;
        a {
          text-decoration: none;
          color: #999;
          padding: 0 10px;
          &.active {
            color: #000;
          }
        }
      }
      .content {
        width: 350px;
        height: 300px;
        margin: 20px auto 0;
        #weixin{
          text-align: center;
        }
        .phoneLogin {
          .row {
            display: flex;
            margin-bottom: 20px;
          }
          .ipt {
            flex: 1;
            height: 45px;
            padding-left: 10px;
            outline: none;
          }
          .btn {
            background-color: #0a328e;
            color: #fff;
            border: none;
            line-height: 45px;
            cursor: pointer;
          }
          .btncode {
            margin-left: 10px;
            width: 100px;
          }
          .btnlogin {
            width: 100%;
          }
        }
      }
    }
  }
  /deep/.slide-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    canvas {
        position: absolute;
        left: 0;
        top: -120px;
        display: none;
        width: 100%;
        box-sizing: border-box;
    }
    .slide-verify-block{
        width: 85px;
        height: 136px;
    }
    .slide-verify-refresh-icon {
        top: -120px;
        display: none;
    }
    &:hover {
        canvas {
            display: block;
        }
        .slide-verify-refresh-icon {
            display: block;
        }
    }
}
</style>